<template>
  <view>
    <view class="view-navbar">
      <view class="nav-view">
        <image
          class="back-view"
          src="../../static/back.png"
          mode=""
          @click="backAction"
        ></image>
        <!-- <text class="nav-title">{{ mapTitle }}</text> -->
        <view class="submit-view" @click="openSysMap"> 去这里 </view>
      </view>
    </view>
    <view class="view-container">
      <view class="search-view">
        <view class="content-view">
          <!-- <view class="l-view" @click="openAddres">
            <text>{{ searchCity }}</text>
          </view> -->
          <view class="r-view">
            <view class="s-input-view">
              <input
                type="text"
                v-model="condition"
                placeholder="搜索地点"
                @blur="inputKeywordAction"
                @confirm="inputKeywordAction"
              />
            </view>
          </view>
        </view>
      </view>
      <map
        id="map"
        class="map-view"
        :latitude="latitude"
        :longitude="longitude"
        :markers="markers"
        :show-location="true"
      ></map>
      <cover-view class="dingwei" @click="getLocation">
        <cover-image
          src="/static/dingwei.png"
          class="dingwei-image"
        ></cover-image>
      </cover-view>

      <scroll-view
        v-if="dataList.length > 0"
        scroll-y="true"
        @scrolltolower="refresh"
        class="table-view"
      >
        <view
          class="cell-view"
          v-for="(item, index) in dataList"
          :key="index"
          @click="didSelectOneItem(index)"
        >
          <view class="content-view">
            <view class="data-view">
              <text class="title-view">{{ item.name }}</text>
              <text class="sub-title-view">{{ item.city + item.address }}</text>
            </view>
            <view v-if="item.checked">
              <text class="hook">✔</text>
            </view>
          </view>
        </view>
        <u-loadmore
          style="padding: 40rpx 0"
          :status="status"
          :icon-type="iconType"
        />
      </scroll-view>
      <!-- <view class="no-data-view" v-else>
				<image src="../../static/images/nodata.png" mode="widthFix"></image>
				<text>暂无数据</text>
			</view> -->
      <!-- <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address> -->
    </view>
  </view>
</template>

<script>
// import simpleAddress from '../../components/simple-address/simple-address.vue';

let app = getApp()
var map = {}
var appMap = {}
export default {
  data() {
    return {
      status: 'loadmore',
      iconType: 'flower',
      showLoading: false,
      sysInfo: null,
      mapTitle: '选择发货地点',
      height: '',
      windowHeight: '',
      cityPickerValueDefault: [0, 0, 1],
      pickerText: '',
      dataList: [],
      latitude: '',
      longitude: '',
      searchCity: '加载中',
      markers: [
        {
          latitude: '',
          longitude: '',
          iconPath: '../../static/location2.png',
        },
      ],
      searchObj: null,
      mapContext: null,
      doMove: false,
      map: null,
      index: 0,
      condition: '',
      currentItem: {},
      currentAddres: '',
      currentLocation: {},
    }
  },
  onLoad(options) {
    this.currentAddres = options.addres
    this.sysInfo = uni.getSystemInfoSync()
    uni.$on('selectCity', (data) => {
      this.handleSelectCity(data)
    })
    this.height = this.sysInfo.statusBarHeight
    this.windowHeight = this.sysInfo.windowHeight
    this.currentLocation = {
      latitude: options.latitude,
      longitude: options.longitude,
    }
    this.moveToLocation({
      latitude: options.latitude,
      longitude: options.longitude,
    })
  },
  onReady() {
    this.mapContext = uni.createMapContext('map', this)
    this.searchObj = new plus.maps.Search(this.mapContext)
    this.searchObj.onPoiSearchComplete = (state, result) => {
      if (state == 0) {
        if (result.currentNumber <= 0) {
          console.log('没有检索到结果')
          this.status = 'nomore'
        } else {
          this.status = 'loadmore'
          let list = result.poiList
          this.dataList = this.dataList.concat(list)
          if (this.dataList.length > 0 && this.index == 0) {
            this.dataList[0].checked = true
            let path = ''
            let point = this.dataList[0].point
            if (this.doMove) {
              this.moveToLocation(point)
              this.doMove = false
            }
          }
        }
      } else {
        console.log('检索失败')
      }
    }
    if (this.currentAddres) {
      this.doMove = true
      this.getPoiInCity('', this.currentAddres)
      // uni.getLocation({
      //   geocode: true,
      //   success: (res) => {
      //     this.getPoiInCity('', this.currentAddres)
      //   },
      //   fail() {
      //     uni.showToast({
      //       title: '获取定位失败，请检查是否开启定位！',
      //       icon: 'none',
      //       duration: 1500,
      //     })
      //   },
      //   complete: (e) => {
      //     uni.hideLoading()
      //   },
      // })
    } else {
      this.getLocation()
    }
  },
  onShow() {
    if (this.searchObj) {
      if (this.currentAddres) {
        this.doMove = true
        this.getPoiInCity('', this.currentAddres)
      } else {
        this.getLocation()
      }
    }
  },
  methods: {
    openSysMap() {
      uni.getLocation({
        type: 'gcj02',
        geocode: true,
        success: (res) => {
          let data = {}
          this.dataList.forEach((item) => {
            if (item.checked) {
              data = item.point
            }
          })
          plus.maps.Map.reverseGeocode(
            data,
            { coordType: 'gcj02', city: this.searchCity },
            (event) => {
              var dst = new plus.maps.Point(
                event.coord.longitude,
                event.coord.latitude
              )
              var src = new plus.maps.Point(res.longitude, res.latitude)
              // 调用系统地图显示
              var address = event.address
              plus.maps.openSysMap(dst, address, src)
            }
          )
        },
        fail() {
          uni.showToast({
            title: '获取定位失败，请检查是否开启定位！',
            icon: 'none',
            duration: 1500,
          })
        },
        complete: (e) => {
          uni.hideLoading()
        },
      })
    },
    handleSubmit() {
      let data = {}
      this.dataList.forEach((item) => {
        if (item.checked) {
          data = item.point
        }
      })
      plus.maps.Map.reverseGeocode(
        data,
        { coordType: 'gcj02', city: this.searchCity },
        (event) => {
          var address = event.address // 转换后的地理位置
          uni.$emit('selectAddres', event)
          this.backAction()
        }
      )
    },
    handleSelectCity(e) {
      this.searchCity = e.city_name
      this.index = 0
      this.dataList = []
      this.doMove = true
      this.getPoiInCity(
        this.searchCity,
        this.condition ? this.condition : this.searchCity,
        this.index
      )
    },
    refresh() {
      this.index++
      this.status = 'loading'
      if (this.condition) {
        this.getPoiInCity(this.searchCity, this.condition, this.index)
      } else {
        let point = new plus.maps.Point(this.longitude, this.latitude)
        console.log(this.index)
        this.getNearbyPoi(point, this.index)
      }
    },
    moveToLocation(point) {
      this.longitude = point.longitude
      this.latitude = point.latitude
      this.markers[0].latitude = point.latitude
      this.markers[0].longitude = point.longitude
    },
    getLocation() {
      this.index = 0
      this.dataList = []
      uni.getLocation({
        type: 'gcj02',
        geocode: true,
        success: (res) => {
          console.log(res)
          let data = res.address
          this.searchCity = data.city
          this.longitude = res.longitude
          this.latitude = res.latitude
          this.doMove = true
          let point = new plus.maps.Point(res.longitude, res.latitude)
          this.searchCity = res.address.city
          this.getNearbyPoi(point)
        },
        fail() {
          uni.showToast({
            title: '获取定位失败，请检查是否开启定位！',
            icon: 'none',
            duration: 1500,
          })
          // setTimeout(() => {
          //   var Intent = plus.android.importClass('android.content.Intent')
          //   var Settings = plus.android.importClass('android.provider.Settings')
          //   var Uri = plus.android.importClass('android.net.Uri')
          //   var mainActivity = plus.android.runtimeMainActivity()
          //   var intent = new Intent()
          //   intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
          //   var uri = Uri.fromParts(
          //     'package',
          //     mainActivity.getPackageName(),
          //     null
          //   )
          //   intent.setData(uri)
          //   mainActivity.startActivity(intent)
          // }, 1500)
        },
        complete: (e) => {
          uni.hideLoading()
        },
      })
    },
    backAction(e) {
      uni.navigateBack({})
    },
    initData: function () {},
    inputKeywordAction(e) {
      this.index = 0
      this.dataList = []
      this.doMove = true
      if (this.condition != '') {
        this.getPoiInCity(this.searchCity, e.detail.value)
      } else {
        this.getLocation()
      }
    },
    getNearbyPoi(point, index = 0) {
      // 获取附近poi
      this.searchObj.poiSearchNearBy('', point, 1000, index)
    },
    getPoiInCity(city, key, index = 0) {
      // 获取指定城市、指定关键词搜索的poi
      this.searchObj.poiSearchInCity(city, key, index)
    },
    openAddres() {
      uni.navigateTo({
        url: '/pages/city/index',
      })
    },
    didSelectOneItem(index) {
      this.currentItem = this.dataList[index]
      let point = this.dataList[index].point
      this.moveToLocation(point)
      this.dataList.forEach((v, i) => {
        if (index != i) {
          v.checked = false
        } else {
          v.checked = true
        }
      })
      // uni.navigateBack({});
    },
    onConfirm(e) {
      debugger
      this.pickerText = JSON.stringify(e)
    },
  },
}
</script>

<style lang="scss" scoped>
.view-navbar {
  position: fixed;
  width: 100%;
  height: 88rpx;
  z-index: 2;
  background-color: white;
  border-bottom: 1rpx solid rgb(245, 245, 245);

  .nav-view {
    position: absolute;
    top: 0;
    width: 100%;
    height: 88rpx;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .back-view {
      position: absolute;
      top: 24rpx;
      left: 30rpx;
      width: 36rpx;
      height: 36rpx;
      z-index: 100;
    }

    .submit-view {
      position: absolute;
      top: 24rpx;
      right: 30rpx;
      z-index: 100;
      color: black;
      font-size: 32rpx;
    }

    .nav-title {
      position: absolute;
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      color: black;
      font-size: 32rpx;
      font-weight: 600;
      text-align: center;
      box-sizing: 1;
    }

    .right-view {
      position: absolute;
      top: 24rpx;
      right: 30rpx;
      width: 36rpx;
      height: 36rpx;
    }
  }
}

.view-container {
  position: fixed;
  top: 88rpx;
  bottom: 0;
  // height: calc(100% - var(--status-bar-height));
  width: 100%;
  z-index: 1;

  background-color: rgb(242, 242, 244);

  .no-data-view {
    position: relative;
    top: 90rpx;
    width: 100%;
    height: calc(100% - 90rpx);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    image {
      width: 240rpx;
      height: 240rpx;
    }

    text {
      padding-top: 34rpx;
      text-align: center;
      font-size: 34rpx;
      color: rgb(51, 51, 51);
    }
  }

  .search-view {
    position: relative;
    width: 100%;
    height: 90rpx;

    background-color: white;
    border-bottom: 1rpx solid rgb(245, 245, 245);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .content-view {
      position: relative;
      width: calc(100% - 48rpx);
      height: 100%;

      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      .l-view {
        position: relative;
        width: 25%;
        height: 100%;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        image {
          position: relative;
          width: 34rpx;
          height: 34rpx;
        }

        text {
          position: relative;
          padding-left: 5rpx;
          padding-right: 5rpx;
          font-size: 30rpx;

          color: #333333;
        }
      }

      .r-view {
        position: relative;
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .s-input-view {
          position: relative;
          width: calc(100% - 54rpx);
          height: 64rpx;

          border-radius: 32rpx;

          background-color: rgb(245, 245, 245);

          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;

          image {
            position: relative;
            width: 34rpx;
            height: 34rpx;

            margin-left: 20rpx;
          }

          input {
            position: relative;
            padding-left: 10rpx;
            padding-right: 10rpx;
            width: calc(100% - 34rpx - 20rpx - 10rpx);

            font-size: 32rpx;
            color: #333333;

            text-align: center;
          }
        }
      }
    }
  }

  .map-view {
    position: relative;
    width: 100%;
    height: 700rpx;
  }

  .table-view {
    position: relative;
    width: 100%;
    height: calc(100% - 90rpx - 700rpx);

    .cell-view {
      position: relative;
      width: 100%;
      background-color: white;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .content-view {
        position: relative;
        width: calc(100% - 48rpx);
        height: 120rpx;
        background-color: white;
        border-bottom: 1rpx solid rgb(245, 245, 245);

        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        .data-view {
          position: relative;
          width: 100%;
          height: 100%;

          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .title-view {
            position: relative;
            width: 100%;

            font-size: 30rpx;
            color: #333333;

            text-align: left;

            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .sub-title-view {
            position: relative;
            width: 100%;
            margin-top: 6rpx;
            font-size: 26rpx;
            color: #999999;

            text-align: left;
          }
        }

        .distance-view {
          position: relative;
          width: 20%;
          height: 100%;

          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          text {
            position: relative;
            width: 100%;

            font-size: 32rpx;
            color: #0c61ff;

            text-align: right;
          }
        }
      }
    }
  }
}

.hook {
  font-size: 26rpx;
  color: #0c61ff;
}

.dingwei {
  width: 60rpx;
  height: 60rpx;
  position: fixed;
  bottom: 760rpx;
  left: 30rpx;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4rpx;
}

.dingwei-image {
  width: 40rpx;
  height: 40rpx;
}

::v-deep .amap-logo {
  display: none !important;
}

::v-deep .amap-copyright {
  display: none !important;
}
</style>
